﻿<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <style>
        .my-input-class {
            padding: 3px 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .my-confirm-class {
            padding: 3px 6px;
            font-size: 12px;
            color: white;
            text-align: center;
            vertical-align: middle;
            border-radius: 4px;
            background-color: #337ab7;
            text-decoration: none;
        }

        .my-cancel-class {
            padding: 3px 6px;
            font-size: 12px;
            color: white;
            text-align: center;
            vertical-align: middle;
            border-radius: 4px;
            background-color: #a94442;
            text-decoration: none;
        }

        .error {
            border: solid 1px;
            border-color: #a94442;
        }

        .destroy-button{
            padding:5px 10px 5px 10px;
            border: 1px blue solid;
            background-color:lightgray;
        }
    </style>
</head>
<body>
    <table id="myAdvancedTable" class="stripe">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>DOB</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Elliott</td>
                <td>Beaty</td>
                <td>01/14/2011</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Dirt</td>
                <td>01/14/2004</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>01/14/2003</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>Doe</td>
                <td>01/11/2001</td>
            </tr>
            <tr>
                <td>Billy</td>
                <td>Bob</td>
                <td>02/14/1947</td>
            </tr>
            <tr>
                <td>Bobby</td>
                <td>Axlerod</td>
                <td>01/27/2001</td>
            </tr>
            <tr>
                <td>Elliott</td>
                <td>Beaty</td>
                <td>01/13/2007</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Dirt</td>
                <td>01/14/2001</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>01/14/2001</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>Doe</td>
                <td>01/14/2001</td>
            </tr>
            <tr>
                <td>Billy</td>
                <td>Bob</td>
                <td>01/14/2001</td>
            </tr>
            <tr>
                <td>Bobby</td>
                <td>Axlerod</td>
                <td>01/14/2001</td>
            </tr>
        </tbody>
    </table>
    <br />
    <span class="destroy-button" onclick="destroyTable()">Destroy Table</span>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="../js/dataTables.cellEdit.js"></script>
<script src="advanced.js"></script>

